import React, { useEffect, useState } from 'react'
import { Form, Input, Button, Row, Col, Table } from 'antd'

export default function TableDemo() {
  const [tableList, setTableList] = useState([])
  const [form] = Form.useForm()
  useEffect(() => {
    let list = []
    for (let index = 0; index < 30; index++) {
      list.push({
        name: '张阿三',
        age: index,
        remark: '所发生的发斯蒂芬',
        status: [1, 2],
        key: index,
      })
    }
    setTableList(list)
  }, [])
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'remark',
      dataIndex: 'remark',
      key: 'remark',
      render: (value) => <span className="text-red-200">{value}</span>,
    },
    {
      title: 'status',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <>
          {status.map((item) => (
            <span key={item} className="text-green-300">
              {item}-
            </span>
          ))}
        </>
      ),
    },
    {
      title: 'actions',
      dataIndex: 'actions',
      key: 'actions',
      render: (_, record) => (
        <Button onClick={() => delRow(record.key)}>删除</Button>
      ),
    },
  ]
  const [selectedRowKeys, setSelectRowKeys] = useState([])
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows
      )
      setSelectRowKeys(selectedRowKeys)
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  }
  const delRow = (id) => {
    const newData = tableList.filter((item) => item.key !== id)
    console.log(newData, typeof id)
    setTableList(newData)
  }
  const addRow = () => {
    const item = {
      key: '4',
      name: 'lisi',
      status: [2, 4, 56],
      age: '11',
      remark: '12312sfasdfasdfasdf',
    }
    setTableList([...tableList, item])
  }
  const onFinish = (value) => {
    console.log('提交', value)
  }
  return (
    <div>
      <>
        <Form form={form} onFinish={onFinish}>
          <Row gutter={[16, 16]}>
            <Col span={6}>
              <Form.Item
                label="姓名"
                name="name"
                rules={[{ required: true, message: '姓名必填' }]}
              >
                <Input placeholder="input placeholder" />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="年龄" name="age">
                <Input placeholder="input placeholder" />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="Field A" name="a">
                <Input placeholder="input placeholder" />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    form.resetFields()
                  }}
                >
                  reset
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Button onClick={addRow}>添加一行</Button>
        <Table
          loading={false}
          rowSelection={rowSelection}
          dataSource={tableList}
          columns={columns}
          pagination={{
            showSizeChanger: true,
            total: tableList.length,
          }}
        ></Table>
      </>
    </div>
  )
}
